<template>
  <view class="container-conversation">
    <view class="scroll-box">
      <view class="uni-list margintop-bar">
        <view
          v-for="item in conversationList"
          :key="item.conversationID"
          @tap="handleRoute(item.conversationID)"
        >
          <TUI-conversation-item
            :data-type="item.type"
            :conversation="item"
          ></TUI-conversation-item>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- 这里有个加载的补丁逻辑待优化，页面向SDK请求conversationList的时候会有时延，
造成页面的一个抖动，这里加一个if逻辑打一个补丁，后续继续优化 -->
<script>
import logger from '@/utils/logger'
import TUIConversationItem from '@/components/tui-conversation/conversation-item/index'
import TUIMessageList from '@/components/tui-chat/message-list/index'

export default {
  data() {
    return {
      conversationList: [
        {
          conversationID: 'conversationId123',
          type: 'C2C',
          subType: '',
          unreadCount: 10,
          lastMessage: {
            nick: '',
            nameCard: '',
            lastTime: 1673257210,
            lastSequence: 0,
            fromAccount: 'userId123',
            isRevoked: false,
            isPeerRead: false,
            messageForShow: '我刚刚发的消息',
            type: 'MSG_TEXT',
            payload: {
              text: '我刚刚发的消息',
            },
          },
          groupProfile: null,
          userProfile: {
            userId: 'userId123',
            nick: 'user123',
            avatar: 'https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png',
            gender: 'GENDER_UNKNOWN',
            birthday: 20010101,
            selfSignature: '个性签名',
            lastUpdatedTime: 1673251210000,
          },
          groupAtInfoList: [],
          remark: '备注名',
          isPinned: true,
          messageRemindType: 'MSG_REMIND_ACPT_AND_NOTE',
          markList: ['CONV_MARK_TYPE_STAR', 'CONV_MARK_TYPE_UNREAD'],
        },
        {
          conversationID: 'conversationId12344',
          type: 'GROUP',
          subType: 'GROUP_WORK',
          unreadCount: 1,
          lastMessage: {
            nick: 'ych',
            nameCard: 'ych-card',
            lastTime: 1673257210,
            lastSequence: 0,
            fromAccount: 'userId123',
            isRevoked: false,
            isPeerRead: false,
            messageForShow: '我刚刚发的群聊消息',
            type: 'MSG_TEXT',
            payload: {
              text: '我刚刚发的群聊消息',
            },
          },
          groupProfile: {
			groupId: 'userId123',
            name: 'user 的群聊',
            avatar: 'https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png',
            introduction: '简介就是这个',
			type: 'GRP_WORK',
			Notification: 'notice!!!!!',
			ownerId: 'user123',
			infoSequence: 1,
			lastInfoTime: 1673257110,
			selfInfo: {

			},
			memberCount: 10,
		  },
          userProfile: {},
          groupAtInfoList: [],
          remark: '备注名',
          isPinned: true,
          messageRemindType: 'MSG_REMIND_ACPT_AND_NOTE',
          markList: ['CONV_MARK_TYPE_STAR', 'CONV_MARK_TYPE_UNREAD'],
        },
      ],
      showSelectTag: false,
      array: [
        {
          name: '发起会话',
        },
        {
          name: '发起群聊',
        },
        {
          name: '加入群聊',
        },
      ],
    }
  },

  components: {
    TUIConversationItem,
    TUIMessageList,
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // 登入后拉去会话列表
    this.getConversationList()
    uni.$TUIKit.on(
      uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED,
      this.onConversationListUpdated
    )
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    uni.$TUIKit.off(uni.$TUIKitEvent.SDK_READY, this.onConversationListUpdated)
  },

  methods: {
    handleRoute(id) {
      const url = `../../TUI-Chat/chat?conversationID=${id}`
      console.log('here')
      uni.navigateTo({
        url,
      })
    },
    onConversationListUpdated(event) {
      logger.log('TUI-conversation | onConversationListUpdated  |ok')
      this.setData({
        conversationList: event.data,
      })
    },

    getConversationList() {
      uni.$TUIKit.getConversationList().then((imResponse) => {
        logger.log(
          `TUI-conversation | getConversationList | getConversationList-length: ${imResponse.data.conversationList.length}`
        )
        this.setData({
          conversationList: imResponse.data.conversationList,
        })
      })
    },

    showMore() {
      this.setData({
        showSelectTag: !this.showSelectTag,
      })
    },

    learnMore() {
      uni.navigateTo({
        url: '../../TUI-User-Center/webview/webview?url=https://cloud.tencent.com/product/im',
      })
    },

    handleOnTap(event) {
      this.setData(
        {
          showSelectTag: false,
        },
        () => {
          switch (event.currentTarget.dataset.name) {
            case '发起会话':
              this.$createConversation()
              break

            case '发起群聊':
              this.$createGroup()
              break

            case '加入群聊':
              this.$joinGroup()

            default:
              break
          }
        }
      )
    },

    goHomePage() {
      // uni.navigateTo 不能跳转到 tabbar 页面，使用 uni.switchTab 代替
      uni.switchTab({
        url: '../../TUI-Index/index',
      })
    },

    handleEditToggle() {
      this.setData({
        showSelectTag: false,
      })
    },

    $createConversation() {
      uni.navigateTo({
        url: '../create-conversation/create',
      })
    },

    $createGroup() {
      uni.navigateTo({
        url: '../../TUI-Group/create-group/create',
      })
    },

    $joinGroup() {
      uni.navigateTo({
        url: '../../TUI-Group/join-group/join',
      })
    },
  },
}
</script>
<style scoped>
@import './conversation.css';
</style>
